<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OffscreenCanvas with Rust and WebAssembly</title>
    <style>
        body{
            background-color: black;
        }
        canvas{
            width: 100%;
        }
    </style>
</head>
<body>
    <canvas id="play"></canvas>
    <script type="module">
        // import init, { generate_alpha_png } from './pkg/wasm_canvas.js';
        const canvas = document.getElementById('play');
        const context = canvas.getContext('2d');
        // await init();
        const img = new Image();
        img.src = './1.png'
        await img.decode();
        canvas.width = img.width * 2;
        canvas.height = img.height;
        // Assuming you have an ImageBitmap created from some source
        const bitmap = await createImageBitmap(img);
        const work = new Worker('./work.js', { type: 'module' });
        work.postMessage({ bitmap },[bitmap]);
        const outputBitmap = await new Promise(resolve => {
            work.onmessage = e => {
                resolve(e.data);
            };
        });
        // const outputBitmap = await generate_alpha_png(imageBitmap);
        context.drawImage(outputBitmap, 0, 0, canvas.width, canvas.height);
        // console.log('main :',outputBitmap);
    </script>
</body>
</html>
